import React from 'react';
import './style.css'
// event
import emitter from '../../util/events';
// antd
import { Icon, Button } from 'antd';

export default class PictureForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            fileList: [
                {Id: "540000198410194410", Name: "Brian Taylor", LargeGraph: "http://dummyimage.com/240x400", Thumbnail: "http://dummyimage.com/100x100"},
                {Id: "420000198401221539", Name: "John Perez", LargeGraph: "http://dummyimage.com/120x90", Thumbnail: "http://dummyimage.com/100x100"},
                {Id: "650000197502131282", Name: "Brian Walker", LargeGraph: "http://dummyimage.com/234x60", Thumbnail: "http://dummyimage.com/100x100"},
                {Id: "450000200512022327", Name: "Jason Harris", LargeGraph: "http://dummyimage.com/468x60", Thumbnail: "http://dummyimage.com/100x100"},
                {Id: "530000199808245604", Name: "Sandra Lee", LargeGraph: "http://dummyimage.com/468x60", Thumbnail: "http://dummyimage.com/100x100"},
            ]
        }

        this.dragging = null;
        this.index = null;
        this.placeholder = document.createElement('li');
        this.placeholder.className="sortable-placeholder";
        this.placeholder.addEventListener('dragover', this.dragover)
        this.placeholder.addEventListener('drop', this.dragover)
    }

    dragover = (e) => {
        let target = e.target;
        if (e.type === 'drop') {
            e.stopPropagation();
            target.parentNode && target.parentNode.insertBefore(this.dragging, target.nextSibling)
            return false;
        }
        e.preventDefault();
    }

    componentDidMount() {
        emitter.addListener('selectPicture', (data) => {
            this.setState({
                fileList: data
            })
        })
    }

    showModal = (e) => {
        var data = JSON.parse(e.target.value);
        emitter.emit('showModal', data);
    }

    handerRemove = (e) => {
        e.preventDefault();
        e.stopPropagation();
        this.setState({
            fileList: []
        })
    }

    ondragstart = (e) => {
        e.dataTransfer.effectAllowed = 'move';
        this.dragging = e._targetInst.type === 'li' ? e._targetInst.stateNode : e._targetInst.return.stateNode;
        this.index = e._targetInst.index;
        this.placeholder.style.width = this.dragging.offsetWidth + "px"
        this.placeholder.style.height = this.dragging.offsetHeight + "px"
    }

    ondragover = (e) => {
        let target = e._targetInst.type === 'li' ? e._targetInst.stateNode : e._targetInst.return.stateNode;
        e.preventDefault();
        e.dataTransfer.dropEffect = 'move';
        if(this.dragging === target) {
            target.style.display = 'none';
        }
        let placeholderIndex = this.placeholder.parentNode && [].indexOf.call(this.placeholder.parentNode.childNodes, this.placeholder);
        let targetIndex = target.parentNode && [].indexOf.call(target.parentNode.childNodes, target);
        target.parentNode.insertBefore(this.placeholder, (placeholderIndex < targetIndex ? target.nextSibling : target))
        return false;
    }

    ondragend = (e) => {
        let target = e._targetInst.type === 'li' ? e._targetInst.stateNode : e._targetInst.return.stateNode;
        target.parentNode.removeChild(this.placeholder)
        this.dragging.style.display = 'inline-block';
    }

    render() {
        let pictureEle = this.state.fileList.map(el => {
            return (
                <li 
                    key={el.Id} 

                    draggable="true"
                    onDragStart={this.ondragstart}
                    
                    onDragEnd={this.ondragend}
                    onDragOver={this.ondragover}
                    onDrop={this.ondragover}

                    data-largegrapgh={el.LargeGraph}>
                    <img src={el.Thumbnail} alt=""/>
                    <p>{el.Name}</p>
                </li>
            )
        })


        return (
            <div>
                <p>已选择图片（支持拖动，第一张为主图，最多支持12张）</p>
                <div className="pictrueBtns">
                    <Button 
                        type="primary"
                        value='{"type": "selectPictrue", "data": 1}'
                        onClick={this.showModal}
                        disabled={this.state.fileList.length >= 12}>
                        <Icon type="upload" /> 选择图片
                    </Button>

                    <Button type="danger" onClick={this.handerRemove}>清空图片</Button>
                </div>
                <ul className="pictureCont">
                    {
                        pictureEle
                    }
                </ul>
            </div>
        )
    }
} 